/* 导入苹果San Francisco字体（使用系统字体代替） */
:root {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  font-weight: 400;

  /* 苹果设计系统颜色 */
  --apple-blue: #007AFF;
  --apple-red: #FF3B30;
  --apple-green: #34C759;
  --apple-orange: #FF9500;
  --apple-background: #F5F5F7;
  --apple-card: #FFFFFF;
  --apple-text-primary: #1D1D1F;
  --apple-text-secondary: #86868B;
  --apple-border: rgba(0, 0, 0, 0.1);
  --apple-shadow: rgba(0, 0, 0, 0.05);

  /* 深色模式变量 */
  --apple-background-dark: #1C1C1E;
  --apple-card-dark: #2C2C2E;
  --apple-text-primary-dark: #FFFFFF;
  --apple-text-secondary-dark: #EBEBF0;
  --apple-border-dark: rgba(255, 255, 255, 0.1);
  --apple-shadow-dark: rgba(0, 0, 0, 0.3);

  /* 交互变量 */
  --transition-standard: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  --border-radius: 8px;
  --border-radius-large: 12px;

  /* 采用苹果默认亮色模式 */
  color-scheme: light;
  color: var(--apple-text-primary);
  background-color: var(--apple-background);
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    color: var(--apple-text-primary-dark);
    background-color: var(--apple-background-dark);
  }
}

body {
  margin: 0;
  padding: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
}

/* 标题样式 */
h1 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  margin: 20px 0 !important;
  color: var(--apple-text-primary);
}

h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 16px 0 !important;
  color: var(--apple-text-primary);
}

h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 12px 0 !important;
  color: var(--apple-text-primary);
}

/* 按钮样式覆盖 */
.el-button {
  border-radius: 8px !important;
  transition: var(--transition-standard) !important;
  font-weight: 500 !important;
}

.el-button--primary {
  background-color: var(--apple-blue) !important;
  border-color: var(--apple-blue) !important;
}

.el-button--danger {
  background-color: var(--apple-red) !important;
  border-color: var(--apple-red) !important;
}

.el-button--success {
  background-color: var(--apple-green) !important;
  border-color: var(--apple-green) !important;
}

/* 卡片样式 */
.el-card {
  border-radius: var(--border-radius) !important;
  border: none !important;
  box-shadow: 0 2px 12px var(--apple-shadow) !important;
  transition: var(--transition-standard) !important;
  background-color: var(--apple-card) !important;
}

.el-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--apple-shadow) !important;
}

/* 输入框样式 */
.el-input__wrapper {
  border-radius: var(--border-radius) !important;
  transition: var(--transition-standard) !important;
}

/* 表格样式 */
.el-table {
  border-radius: var(--border-radius) !important;
  overflow: hidden !important;
  background-color: var(--apple-card) !important;
}

.el-table th {
  background-color: var(--apple-background) !important;
  font-weight: 600 !important;
}

.el-table--striped .el-table__row--striped td {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

/* 深色模式覆盖 */
@media (prefers-color-scheme: dark) {

  h1,
  h2,
  h3 {
    color: var(--apple-text-primary-dark);
  }

  .el-card {
    background-color: var(--apple-card-dark) !important;
    box-shadow: 0 2px 12px var(--apple-shadow-dark) !important;
  }

  .el-card:hover {
    box-shadow: 0 4px 16px var(--apple-shadow-dark) !important;
  }

  .el-table {
    background-color: var(--apple-card-dark) !important;
    color: var(--apple-text-primary-dark) !important;
  }

  .el-table th {
    background-color: var(--apple-background-dark) !important;
    color: var(--apple-text-primary-dark) !important;
  }

  .el-table--striped .el-table__row--striped td {
    background-color: rgba(255, 255, 255, 0.02) !important;
  }
}

/* 三栏布局容器 */
.apple-layout-container {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* 苹果风格的侧边栏 */
.apple-sidebar {
  width: 25%;
  max-width: 280px;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right: 1px solid var(--apple-border);
  overflow-y: auto;
  transition: var(--transition-standard);
}

/* 内容区域 */
.apple-content {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  background-color: var(--apple-background);
  padding: 20px;
}

/* 详情面板 */
.apple-details {
  width: 25%;
  max-width: 320px;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 1px solid var(--apple-border);
  overflow-y: auto;
  transition: var(--transition-standard);
}

/* 深色模式三栏布局 */
@media (prefers-color-scheme: dark) {

  .apple-sidebar,
  .apple-details {
    background-color: rgba(44, 44, 46, 0.8);
    border-color: var(--apple-border-dark);
  }

  .apple-content {
    background-color: var(--apple-background-dark);
  }
}

/* 物品卡片网格布局 */
.item-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* 苹果风格的物品卡片 */
.apple-item-card {
  border-radius: var(--border-radius);
  background-color: var(--apple-card);
  box-shadow: 0 2px 8px var(--apple-shadow);
  overflow: hidden;
  transition: var(--transition-standard);
  cursor: pointer;
}

.apple-item-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px var(--apple-shadow);
}

.apple-item-card__header {
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: #f0f0f0;
}

.apple-item-card__content {
  padding: 16px;
}

.apple-item-card__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--apple-text-primary);
}

.apple-item-card__info {
  font-size: 14px;
  color: var(--apple-text-secondary);
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.apple-item-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.apple-item-card__tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: rgba(0, 122, 255, 0.1);
  color: var(--apple-blue);
}

/* 深色模式物品卡片 */
@media (prefers-color-scheme: dark) {
  .apple-item-card {
    background-color: var(--apple-card-dark);
    box-shadow: 0 2px 8px var(--apple-shadow-dark);
  }

  .apple-item-card:hover {
    box-shadow: 0 8px 16px var(--apple-shadow-dark);
  }

  .apple-item-card__title {
    color: var(--apple-text-primary-dark);
  }

  .apple-item-card__info {
    color: var(--apple-text-secondary-dark);
  }

  .apple-item-card__header {
    background-color: #2a2a2a;
  }
}